<?php View::display('accounting/menu');?>
<!-- .head -->
<header class="head">
	<!-- ."main-bar -->
	<div class="main-bar">
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12">
					<h3>
						<i class="icon-wrench"></i> จัดการกับบัญชีผู้ใช้
					</h3>
				</div>
			</div>
			<!-- /.row-fluid -->
		</div>
		<!-- /.container-fluid -->
	</div>
	<!-- /.main-bar -->
</header>
<!-- /.head -->
<!-- #content -->
<div id="content">
	<!-- .outer -->
	<div class="container-fluid outer">
		<div class="row-fluid">
			<!-- .inner -->
			<div class="span12 inner">
				<!--Begin Datatables-->
				<div class="row-fluid">
					<div class="span12">
						<div class="box">
							<header>
								<div style="padding: 10px;">
									<form method="get" class="form-search text-center" style="margin: 0;" onsubmit="javascript: return false;">
										<input type="hidden" name="page" value="accounting/account" />
										<input type="text" name="searchText" class="search-query" placeholder="id,email,name" value="<?php echo $params['searchText'];?>" />
										<!--<button type="submit" class="btn btn-info">Search</button>-->
										<button class="btn btn-success addAccount">Add</button>
									</form>
								</div>
							</header>
							<div class="body">
								<table class="table table-bordered dataTable responsive">
									<thead>
										<tr>
											<th>id</th>
											<th>email</th>
											<th>name</th>
											<!-- <th></th> -->
											<th></th>
											<th></th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										<?php
										foreach($params['accounts'] as $key => $account){
										$classNoActive = $account['status'] == 0? 'error': '';
										$activeButton = $account['status'] == 0? '<button class="activeButton btn btn-success">active</button>': '';
										echo <<<HTML
											<tr class="accountRow {$classNoActive}" accountId="{$account['id']}">
												<td class="id">{$account['id']}</td>
												<td class="email"><a target="_blank" href="old.php?page=accounting/account/detail&id={$account['id']}">{$account['email']}</a></td>
												<td class="name">{$account['name']}</td>
												<!--
												<td class="other">
													<div class="btn-group">
													  <a target="_blank" class="btn" href="old.php?page=accounting/account/detail&id={$account['id']}">รายละเอียด</a>
													  <button class="btn dropdown-toggle" data-toggle="dropdown">
													    <span class="caret"></span>
													  </button>
													  <ul class="dropdown-menu">
													    <li><a target="_blank" tabindex="-1" href="old.php?page=accounting/account/invoice&id={$account['id']}">Invoice</a></li>
														<li><a target="_blank" tabindex="-1" href="old.php?page=accounting/account/product&id={$account['id']}">Product</a></li>
													  </ul>
													</div>
												</td>
												-->
												<td class="active">{$activeButton}</td>
												<td class="del"><button class="editAccountButton btn btn-warning" aid={$account['id']}>แก้ไข</button></td>
												<td class="edit"><button class="delAccountButton btn btn-danger" aid={$account['id']}>ลบ</button></td>
											</tr>
HTML;
										}?>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--Begin Datatables-->
	</div>
</div>
<script type="text/template" class="modalText">
	<div class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>Edit account id <span class="accountId"></span></h3>
		</div>
		<div class="modal-body">
			<div class="alert hide resMessage"></div>
			<form class="formAccount">
				<label>ชื่อ</label>
				<input type="text" class="name" value="" />
				<label>ที่อยู่</label>
				<input type="text" class="address" value="" />
				<label>email</label>
				<input type="text" class="email" value="" />
				<label>รหัสประจำตัวประชาชน</label>
				<input type="text" class="peopleId" value="" />
				<label>โทรศัพท์</label>
				<input type="text" class="phone" value="" />
			</form>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn cancel">Cancel</a>
			<a href="#" class="btn btn-primary saveChange">Save changes</a>
		</div>
	</div>
</script>
<script type="text/template" class="modalAdd">
	<div class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>Edit account id <span class="accountId"></span></h3>
		</div>
		<div class="modal-body">
			<div class="alert hide resMessage"></div>
			<form class="formAccount">
				<label>ชื่อ</label>
				<input type="text" class="name" value="" />
				<label>ที่อยู่</label>
				<input type="text" class="address" value="" />
				<label>email</label>
				<input type="text" class="email" value="" />
				<label>password</label>
				<input type="text" class="password" value="" />
				<label>รหัสประจำตัวประชาชน</label>
				<input type="text" class="peopleId" value="" />
				<label>โทรศัพท์</label>
				<input type="text" class="phone" value="" />
			</form>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn cancel">Cancel</a>
			<a href="#" class="btn btn-primary Add">Add</a>
		</div>
	</div>
</script>
<script type="text/javascript">
$(function(){
	$('.accountRow')
    .delegate('.delAccountButton', 'click', function(event){
        if(!window.confirm('ยืนยันการลบ')){
            return false;
        }
		var dTarget = $(event.delegateTarget);
		var accountId = dTarget.attr('accountId');
		$('.delAccountButton', dTarget).button('loading');
		$.ajax('old.php?page=accounting/account.rest', {
			type: 'DELETE',
			data: {id: accountId},
			dataType: 'JSON',
			success: function(data){
				if(data.success){
					delRow(dTarget);
				}
			}
		});
		$('.delAccountButton', dTarget).popover('hide');
	})
	.delegate('.editAccountButton', 'click', function(event){
		var dTarget = $(event.delegateTarget);
		var target = $(event.target);
		var accountId = dTarget.attr('accountId');

		target.button('loading');
		$.get('old.php', { page: 'accounting/account.rest', id: accountId }, function(data){
			var dTarget = $(event.delegateTarget);
			target.button('reset');
			
			var modal = $($('.modalText').html());
			
			$('.accountId', modal).text(data.id);
			$('.address', modal).val(data.address);
			$('.email', modal).val(data.email);
			$('.name', modal).val(data.name);
			$('.peopleId', modal).val(data.peopleId);
			$('.phone', modal).val(data.phone);
			modal.modal();
			modal.on('hidden', function(){
				modal.remove();
			});
			
			$('.saveChange', modal).click(function(){
				var putData = {
						id: data.id,
						address: $('.address', modal).val(),
						email: $('.email', modal).val(),
						name: $('.name', modal).val(),
						peopleId: $('.peopleId', modal).val(),
						phone: $('.phone', modal).val()
					};
				$('.saveChange', modal).button('loading');
				$.ajax('old.php?page=accounting/account.rest', {
					dataType: 'JSON',
					type: 'PUT',
					data: putData,
					success: function(data){
						$('.saveChange', modal).button('reset');
						if(data.success){
							modal.modal('hide');
							$('.email a', dTarget).html(putData.email);
							$('.name', dTarget).text(putData.name);
						}
						else{
							$('.resMessage', modal).text(data.message).removeClass('hide');
						}
					}
				});
			});
			$('.cancel', modal).click(function(){
				$('.close', modal).click();
			});
		}, 'JSON');
	})
	.delegate('.activeButton', 'click', function(event){
        if(!window.confirm('ยืนยันการ active account')){
            return false;
        }
		var dTarget = $(event.delegateTarget);
		var target = $(event.target);
		var accountId = dTarget.attr('accountId');
		target.button('loading');
		$.ajax('old.php?page=accounting/account.rest', {
			dataType: 'json',
			type: 'OPTIONS',
			data: { operation: 'active',id: accountId},
			success: function(data){
				if(data.success){
					dTarget.removeClass('error');
					target.remove();
				}
			}
		});
	});

	$('.addAccount').click(function(event){
		event.preventDefault();
		var modal = $($('.modalAdd').html());
		
		modal.modal();
		modal.on('hidden', function(){
			modal.remove();
		});
		
		$('.Add', modal).click(function(event){
			var sendData = {
					address: $('.address', modal).val(),
					email: $('.email', modal).val(),
					password: $('.password', modal).val(),
					name: $('.name', modal).val(),
					peopleId: $('.peopleId', modal).val(),
					phone: $('.phone', modal).val()
				};
			$('.Add', modal).button('loading');
			$.ajax('old.php?page=accounting/account.rest', {
				dataType: 'JSON',
				type: 'POST',
				data: sendData,
				success: function(data){
					$('.saveChange', modal).button('reset');
					if(data.success){
						location.reload();
					}
					else {
						$('.resMessage', modal).text(data.message).removeClass('hide');
					}
				}
			});
		});
		$('.cancel', modal).click(function(){
			$('.close', modal).click();
		});
	});

	var oTable = $('.dataTable').dataTable({"bFilter": true, "bInfo": false, "bSort": false,
		sDom: "<'pull-right'l>t<'row-fluid'<'span6'f><'span6'p>>",
        sPaginationType: "bootstrap",
        oLanguage: {
            "sLengthMenu": "Show _MENU_ entries"
        }
    });

    $('.dataTables_filter').hide();
    $('.search-query').keyup(function(event){
        event.preventDefault();
        var text = $(this).val();
        $('.dataTables_filter input').val(text);
        $('.dataTables_filter input').keyup();
        return false;
    });

	function delRow(row){
		$(row).fadeOut(function(){
			row = $(row).get(0);
			oTable.fnDeleteRow(oTable.fnGetPosition(row));
		});
	}
});
</script>